<template>
  <view class="inventoryManagementMain">
      <u-navbar
      title="终端管理"
      :background="{ background: '#fb4535' }"
      title-color="#fff"
      back-icon-color="#fff"
    >
      <view
        class="uNavBarRight"
        slot="right"
        @click="$u.route('/pages/inventoryManagement/myMachines')"
        >我的终端
		</view>
    </u-navbar>
    <view class="inventoryManagementBox">
      <view class="inventoryManagementHeader flex align-center justify-between">
        <view class="title">终端管理</view>

      </view>
      <view class="oneBox">
        <view class="oneTop flex align-center justify-between">
          <view class="oneTopLeft"
            >累计已激活(台)<text style="margin-top: 20rpx">{{$tools.format(randerData.totalActive)}}</text></view
          >
          <view class="oneTopRight"><text>{{activationRate}}%</text>累计激活率</view>
        </view>
        <view class="oneSub flex align-center justify-between">
          <view>总库存(台)</view>
          <view>{{$tools.format(randerData.totalMachine)}}</view>
        </view>
      </view>
      <view class="twoBox flex align-center justify-between">
        <view class="twoItem">
          <view>我的库存(台)</view>
          <view><text>{{$tools.format(randerData.myMachine)}}</text></view>
          <view>激活台数：<text>{{randerData.myActive}}</text></view>
          <view>激活率：<text style="color:#f33;">{{personalRate}}%</text></view>
        </view>
        <view class="twoItem">
          <view>团队库存(台)</view>
          <view><text>{{$tools.format(randerData.teamMachine)}}</text></view>
          <view>激活台数：<text>{{$tools.format(randerData.teamActive)}}</text></view>
          <view>激活率：<text style="color:#f33;">{{teamRate}}%</text></view>
        </view>
      </view>
      <view class="threeBox flex align-center justify-between">
        <u-button type="primary" class="button" ripple @tap="$u.route({url:'/pages/inventoryManagement/hzf',params:{type:'HJ'}})">合作方</u-button>
        <u-button type="primary" class="button" ripple @tap="$u.route({url:'/pages/inventoryManagement/qyf',params:{type:'BJ'}})">签约方</u-button>
      </view>
    </view>
	<toast></toast>
  </view>
</template>
<script>
export default {
  data() {
    return {
      randerData: {
        myActive: "0",
        myMachine: "0",
        teamActive: "0",
        teamMachine: "0",
        totalActive: "0",
        totalMachine: "0",
      },
    };
  },
  onLoad() {
    this.getStockData();
  },
  onPullDownRefresh(){
    this.getStockData();
  },
   computed: {
    activationRate() {
      let activationRate = "100";
      if (this.randerData.totalMachine != 0) {
        activationRate =
          (this.randerData.totalActive / this.randerData.totalMachine) * 100
        activationRate = activationRate.toFixed(2); 
      }
      return activationRate;
    },
    personalRate(){
      let personalRate = "100";
      if (this.randerData.myMachine != 0) {
        personalRate =
          (this.randerData.myActive / this.randerData.myMachine) * 100
        personalRate = personalRate.toFixed(2); 
      }
      return personalRate;
    },
    teamRate(){
      let teamRate = "100";
      if (this.randerData.teamMachine != 0) {
        teamRate =
          (this.randerData.teamActive / this.randerData.teamMachine) * 100
        teamRate = teamRate.toFixed(2); 
      }
      return teamRate; 
    }
  },
  methods: {
    getStockData() {
      this.$u.api
        .stockData()
        .then((res) => {
          if (res.status == 200) {
            this.randerData = res.result;
          }
          uni.stopPullDownRefresh();
        })
		.catch((res) => {
		  if (res.errMsg == "request:fail timeout") {
		    this.$u.toast("请求超时，请重试!");
		  } else if (res.errMsg == "request:fail") {
		    this.$u.toast("请求失败，请重试");
		  } else {
		     this.$u.toast("请求失败，请重试");
		  }
		  this.$loading(false);
		  setTimeout(() => {
		    this.$u.route({
		      type: "navigateBack",
		      delta: 1,
		    });
		  }, 2000);
		});
    },
  },
};
</script>
<style lang="scss">
page {
  background: #fff;
}
.uNavBarRight {
  padding-right: 30rpx;
  color: #fff;
}
.inventoryManagementHeader{
  padding-bottom:50rpx;
  .title{
    font-size:50rpx;
    font-weight:bold;
  }
}
.inventoryManagementBox {
  padding: 50rpx 30rpx;
  .oneBox {
    .oneTop {
      margin-bottom: 40rpx;
      .oneTopLeft {
        font-size: 28rpx;
        font-weight: bold;
        position: relative;
        padding-left: 20rpx;
        &::before {
          content: "";
          display: block;
          width: 6rpx;
          height: 28rpx;
          background: #fb4535;
          position: absolute;
          left: 0;
          top: 6rpx;
        }
        text {
          display: block;
          font-size: 60rpx;
          font-weight: bold;
          font-family: "numberFont";
          letter-spacing: 4rpx;
          line-height: 60rpx;
        }
      }
      .oneTopRight {
        font-size: 28rpx;
        text-align: center;
        text {
          color: #fb4535;
          font-weight: bold;
          display: block;
          font-size: 40rpx;
          font-weight: bold;
          font-family: "numberFont";
          letter-spacing: 4rpx;
          line-height: 60rpx;
        }
      }
    }
    .oneSub {
      background: #f1f1f1;
      line-height: 60rpx;
      padding: 0 30rpx;
      view {
        font-weight: bold;
        &:last-of-type {
          font-family: "numberFont";
          letter-spacing: 2rpx;
          font-size: 32rpx;
        }
      }
    }
  }
  .twoBox {
    margin-top: 60rpx;
    border-radius: 10rpx;
    padding: 34rpx 30rpx 30rpx;
    box-shadow: 0 0 20rpx rgb(221, 221, 221);
    .twoItem {
      width: 100%;
      view {
        font-size: 28rpx;
        line-height: 42rpx;
        text {
          font-size: 32rpx;
          font-family: "numberFont";
          font-weight: bold;
          letter-spacing: 2rpx;
        }
      }
    }
  }
  .threeBox {
    padding: 50rpx 0;
    .button {
      width: 48%;
      background: #fb4535;
      font-size: 32rpx;
      margin: 0;
    }
  }
}
</style>